<template>
  <ul class="loading">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</template>
<style lang="less" scoped>
.loading {
  width: 23px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between; 
  li {
    width: 3px; //3*5+4*2=15+8=23
    height: 20px;
    background-color: red;
    // 变形参考点
    transform-origin: bottom;
    animation: loading 0.5s linear infinite;
    &:nth-child(1) {
      animation-delay: -0.5s; //延迟执行
    }
    &:nth-child(2) {
      animation-delay: -0.25s; 
    }
    &:nth-child(3) {
      animation-delay: 0s; 
    }
    &:nth-child(4) {
      animation-delay: 0.25s; 
    }
    &:nth-child(5) {
      animation-delay: 0.5s; 
    }
  }
}
@keyframes loading {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
</style>